<template>
    <view class="browsing-history-page">
        <view class="list-container">
            <view class="card" v-for="(item,index) in list" :key="index">
                <u-cell :title="item.goodsName" :label="item.keyName" :border="false" @click="goDetail(item)">
                    <template #icon>
                        <up-image 
                        :show-loading="true" 
                        width="143rpx" 
                        height="143rpx"
                        radius="15rpx"
                        :src="item.cover"></up-image>
                    </template>
                    <template #value>
                        <view class="value">
                            <text>￥{{item.price}}</text>
                        </view>
                    </template>
                </u-cell>
            </view>
        </view>
    </view>    
</template>
<script setup lang="ts">
import { ref,reactive } from "vue"
import { onLoad , onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import { post } from "@/libs/request"
import { nav } from "@/libs/utils"
const query = reactive({
    pageIndex:1,
    pageSize:10,
    isNext:true
})
const list = ref([])
const goDetail = (item)=>{
    nav(`/subpackage/goods/pages/detail/index?id=${item.goodsId}`, "");
}
/**
 * 获取列表
 */
 const getPaginate = ()=>{
    uni.showLoading({
        title: '加载中',
        mask:true,
    });
    post("browsingHistory/paginate",{
        pageIndex:query.pageIndex,
        pageSize:query.pageSize,
    }).then((res)=>{
        if(res.errCode==0){
            list.value = list.value.concat(res.data);
            query.pageIndex++;
            if(res.data || list.value.length >= res.page.total){
                query.isNext = false;
            }
        }
        uni.hideToast();
    })
} 
/**
 * 重载
 */
 const reload = async()=>{
    list.value = [];
    query.pageIndex = 1;
    query.isNext = true;
    await getPaginate();
}
onLoad(()=>{
    getPaginate();
})
onReachBottom(() => {
    query.isNext &&  getPaginate();
})
onPullDownRefresh(async ()=>{
    await reload();
    uni.stopPullDownRefresh();
})
</script>
<style scoped lang="less">
.browsing-history-page{
    height: 100vh;
    overflow: auto;
    background: #f7f7f7;
    .list-container{
        padding: 40rpx 20rpx;
        .card{
            width: 100%;
            background: #FFFFFF;
            border-radius: 15rpx;
            box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
            margin-bottom: 20rpx;
            .value{
                display: flex;
                flex-flow: column;
                align-items: flex-end;
                color: #909193;
                font-size: 26rpx;
            }
        }
    }
}
</style>